<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>
        Responsive Design - All together
    </title>
    <link href="styles/task2.css" rel="stylesheet" />
    <link href="styles/ResponsiveDesign.css" rel="stylesheet" />
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>
                <a href="#">

                <img src="images/ninja-logo.png" />

                <span>The .NET Ninja</span>

            </a>
            </h1>
            <nav>
                <ul>
                    <li>
                        <a href="#">Nav item 1</a>
                    </li>
                    <li>
                        <a href="#">Nav item 2</a>
                        <ul>
                            <li>
                                <a href="#">Sub item 2.1</a>
                            </li>
                            <li>
                                <a href="#">Sub item 2.2</a>
                            </li>
                            <li>
                                <a href="#">Sub item 2.3</a>
                            </li>
                            <li>
                                <a href="#">Sub item 2.4</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Nav item 3</a>
                        <ul>
                            <li>
                                <a href="#">Sub item 3.1</a>
                            </li>
                            <li>
                                <a href="#">Sub item 3.2</a>
                            </li>
                            <li>
                                <a href="#">Sub item 3.3</a>
                            </li>
                            <li>
                                <a href="#">Sub item 3.4</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Nav item 4</a>
                    </li>
                </ul>
            </nav>
        </header>
        <aside>
            <div class="social">
                <ul>
                    <li>
                        <a href="#">

                        <img src="images/social_twitter_box.png" />

                        <span>Tweet about us</span>

                    </a>
                    </li>
                    <li>
                        <a href="#">

                        <img src="images/social_facebook.png" />

                        <span>Follow us on Facebook</span>

                    </a>
                    </li>
                    <li>
                        <a href="#">

                        <img src="images/social_google.png" />

                        <span>Join us on Google Plus</span>

                    </a>
                    </li>
                    <li>
                        <a href="#">

                        <img src="images/social_linkedin.png" />

                        <span>Join us on LinkedIn</span>

                    </a>
                    </li>
                    <li>
                        <a href="#">

                        <img src="images/social_myspace.png" />

                        <span>Follow us on Myspace</span>

                    </a>
                    </li>
                </ul>
            </div>
            <div class="news">
                <ul>
                    <li>
                        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
                    </li>
                    <li>
                        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
                    </li>
                    <li>
                        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
                    </li>
                    <li>
                        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
                    </li>
                </ul>
            </div>
        </aside>
        <section>
            <article>
                <header>
                    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
                </header>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa
                    nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Morbi posuere massa pretium neque condimentum quis posuere
                    libero ullamcorper. Praesent viverra sagittis nisi vel mattis. Pellentesque
                    non quam sem. Aenean dignissim elementum eleifend. Etiam ac dolor diam,
                    at vehicula felis. Fusce pretium placerat dui non egestas. Vivamus molestie
                    gravida urna, sit amet cursus ligula eleifend ac. Cras feugiat ultricies
                    eros, ac faucibus felis ullamcorper quis. Nulla fringilla tellus at risus
                    dictum sit amet bibendum velit mattis. Nam hendrerit accumsan aliquam.
                    Integer tincidunt felis a nibh tincidunt volutpat.</p>
                </div>
            </article>
            <article>
                <header>
                    <h1>Nulla adipiscing, ipsum malesuada</h1>
                </header>
                <div>
                    <p>Nulla adipiscing, ipsum malesuada sagittis euismod, nulla felis faucibus
                    diam, nec tempus mauris leo at est. Nunc ligula tortor, tincidunt a porta
                    sed, dignissim a neque. Aenean sagittis adipiscing nunc, a bibendum sapien
                    tincidunt ut. Fusce mattis fermentum sollicitudin. Phasellus id aliquet
                    mi. Mauris quis hendrerit turpis. Donec auctor sollicitudin pharetra. Phasellus
                    elementum faucibus aliquet. Nulla egestas elementum posuere. Vivamus pulvinar
                    tempor neque ut posuere. Integer consectetur pulvinar convallis. Nam auctor
                    tortor id neque volutpat vel placerat nulla vulputate.</p>
                </div>
            </article>
            <article>
                <header>
                    <h1>Aenean quam eros, sollicitudin eu auctor eu</h1>
                </header>
                <div>
                    <p>Aenean quam eros, sollicitudin eu auctor eu, convallis eget augue. Praesent
                    aliquet luctus mauris vel molestie. Praesent hendrerit hendrerit placerat.
                    Ut pharetra nisi id purus scelerisque pulvinar. Mauris sodales consequat
                    tincidunt. Integer pellentesque tristique leo et accumsan. Etiam augue
                    tellus, ornare ut blandit sit amet, venenatis in felis. Fusce augue mauris,
                    adipiscing quis porttitor ut, euismod at diam. Donec eu dolor nibh. Proin
                    sit amet fermentum nunc. Proin aliquam, mauris in euismod molestie, lorem
                    risus commodo urna, et faucibus libero turpis quis libero.</p>
                </div>
            </article>
            <article>
                <header>
                    <h1>Phasellus non lacus sit</h1>
                </header>
                <div>
                    <p>Phasellus non lacus sit amet dolor blandit consequat sit amet id felis.
                    Nunc eu massa ac lacus posuere ultricies. Pellentesque aliquam nunc ut
                    enim feugiat viverra. Pellentesque habitant morbi tristique senectus et
                    netus et malesuada fames ac turpis egestas. Duis id pretium diam. Suspendisse
                    sollicitudin, nisi sit amet tempus gravida, erat nulla bibendum metus,
                    ullamcorper lobortis urna dolor eget purus. Aliquam rhoncus quam vitae
                    sapien rutrum hendrerit. Donec rutrum vehicula nibh vel lacinia. In hac
                    habitasse platea dictumst. Vestibulum orci mi, porttitor ac eleifend et,
                    rhoncus vel ipsum. Quisque sed magna vitae dui tempus blandit placerat
                    sed libero. Etiam volutpat, tortor non sollicitudin porta, est lacus venenatis
                    dolor, et cursus ipsum risus et orci. Aenean posuere consequat metus, non
                    molestie nibh dictum sit amet. Nam eu orci vitae justo sagittis laoreet.
                    Curabitur sollicitudin turpis et orci viverra semper.</p>
                </div>
            </article>
        </section>
        <footer>
            <h2>
                Telerik Software Academy - Slice and Dice
            </h2>
        </footer>
    </div>
</body>

</html>
